<template>
  <div class="app-container" style="padding: 8px;">
    <div class="head-container">
      <el-form ref="form" label-position="right" :model="form" size="small" label-width="80px">

        <!--   上传文件   -->
        <el-form-item label="文件1">
          <el-upload
            ref="upload1"
            :limit="1"
            :before-upload="beforeUpload"
            :auto-upload="false"
            :headers="headers"
            :on-success="handleSuccess"
            :on-error="handleError"
            :on-change="addFile1"
            action=""
          >
            <div class="eladmin-upload"><i class="el-icon-upload"/> 添加文件一</div>
            <span slot="tip" class="el-upload__tip">请上传，且不超过100M</span>
          </el-upload>
        </el-form-item>
        <el-form-item label="文件2">
          <el-upload
            ref="upload2"
            :limit="1"
            :before-upload="beforeUpload"
            :auto-upload="false"
            :headers="headers"
            :on-success="handleSuccess"
            :on-error="handleError"
            action=""
            :on-change="addFile2"
          >
            <div class="eladmin-upload"><i class="el-icon-upload"/> 添加文件二</div>
            <span slot="tip" class="el-upload__tip">请上传，且不超过100M</span>
          </el-upload>
        </el-form-item>
        <el-form-item label="生成类别" prop="type">
          <el-radio-group v-model="form.type" size="medium">
            <el-radio v-for="(item, index) in typeOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{item.label}}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="">
          <el-button :loading="doSubmitLoading" size="medium" type="primary" @click="doSubmit">生成</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="body-container">
      {{ bodyContainer }}
    </div>
  </div>

</template>

<script>
    import {mapGetters} from 'vuex'
    import {getToken} from '@/utils/auth'
    import checkPermission from '@/utils/permission'
    import initData from '@/mixins/initData'
    import {parseTime, downloadFile} from '@/utils/index'
    import {compareDifferentFromExcel} from '@/api/code-tools'
    import {downloadFileFunction} from '@/api/downloadFile'

    export default {
        mixins: [initData],
        data() {
            return {
                form: {
                    body: '',
                    type: 'type12'

                },
                bodyContainer: '',
                doSubmitLoading: false,
                typeOptions: [{
                    "label": "以文件一为基准",
                    "value": "type12"
                }, {
                    "label": "以文件二为基准",
                    "value": "type21"
                }
                ],
                fileList1: [],
                fileList2: [],
                headers: {'Authorization': 'Bearer ' + getToken()}
            }
        },
        computed: {
            ...mapGetters([
                'baseApi',
                'excelFileUploadApiGeneratorMysql',
                'excelFileUploadApiGeneratorMysqlZip'
            ])
        },
        created() {
            this.$nextTick(() => {
                this.init()
            })
        },
        methods: {
            parseTime,
            checkPermission,
            beforeUpload(file) {
                let isLt2M = true
                isLt2M = file.size / 1024 / 1024 < 100
                if (!isLt2M) {
                    this.$message.error('上传文件大小不能超过 100MB!')
                }
                this.loading = false
                return isLt2M
            },
            handleSuccess(response, file, fileList) {
                //this.bodyContainer = response
                //this.$refs.upload.clearFiles()
                //this.resetForm()
            },
            addFile1(file) {
                console.log(file)
                this.fileList1.push(file.raw);
            },
            addFile2(file) {
                console.log(file)
                this.fileList2.push(file.raw);
            },
            // 监听上传失败
            handleError(e, file, fileList) {
                const msg = JSON.parse(e.message)
                this.$notify({
                    title: msg.message,
                    type: 'error',
                    duration: 2500
                })
                this.loading = false
            },
            resetForm() {
                this.$refs['form'].resetFields()
                this.$refs.upload1.clearFiles()
                this.$refs.upload2.clearFiles()
                this.form = {
                    type: 'type12'
                }
            },
            doSubmit() {
                this.loading = true
                let ttFile1 = this.fileList1[0];
                let ttFile2 = this.fileList2[0];
                let type = this.form.type;
                console.log(ttFile1);
                console.log(ttFile2);
                const form = new FormData()
                // 文件对象
                form.append('file1', ttFile1);
                form.append('file2', ttFile2);
                form.append('type', type);
                console.log(form);
                let fileName = ttFile1.name;
                let outputFileName = fileName.split(".")[0] + `导出结果.xlsx`;
                console.log(fileName);
                compareDifferentFromExcel(form).then(res => {
                    downloadFileFunction(res, outputFileName)
                    this.resetForm()
                    this.form.body = res.data
                    this.$notify({
                        title: '文件处理成功',
                        type: 'success',
                        duration: 2500
                    })
                }).catch(err => {
                    console.log(err);
                });
            }
        }
    }
</script>

<style scoped>
  .el-image__error, .el-image__placeholder {
    background: none;
  }

  .el-image-viewer__wrapper {
    top: 55px;
  }
</style>
